<template>
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <div>
               <el-input v-model="title" placeholder="查找标题" style="width: 200px;margin-right: 5px;"></el-input>
               <el-button icon="el-icon-search" circle @click="getByTitle"></el-button>
            </div>
            <el-button type="primary" icon="el-icon-edit" circle style="height: 40px;" @click="dialogVisible = true"></el-button>

            <el-dialog
            :visible="contentDialog"
            :before-close="handleClose"
            width="30%"
            >
                <div ref="essayContent" style="overflow-x: hidden;"></div>
            </el-dialog>


            <el-dialog
            :visible.sync="dialogVisible"
            width="45%"
            center>
            <el-col  style="display:block;">
                <div class="sub-title">输入搜索词</div>
                <el-autocomplete
                class="inline-input"
                v-model="state"
                :fetch-suggestions="associated"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
                ></el-autocomplete>
            </el-col>

            <el-table
            :data="essays"
            height="250"
            style="width: 100%">

                <el-table-column
                prop="title"
                label="标题"
                width="350">
                </el-table-column>
                <el-table-column
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handlePreview(scope.row.link)"
                    >
                    预览
                    </el-button>
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleCommit(scope.row.title,scope.row.link)">
                    收藏
                    </el-button>
                </template>
                </el-table-column>
            </el-table>

                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleCommit()">确 定</el-button>
            </el-dialog>

        </el-header>

        <el-main>
            <el-table :data="linkArray">
                <el-table-column prop="title" label="标题" width="540px">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" :href="scope.row.link" target="blank">跳转</el-link>
                        <el-button type="primary" @click="handlePreview(scope.row.link)" style="margin-left: 30px;">预览</el-button>
                        <el-button type="danger" @click="delLinkById(scope.row.id)" style="margin-left: 30px;">删除</el-button>
                    </template>
                    
                </el-table-column>
                

            </el-table>
    </el-main>
    </el-container>
</template>

<script>
import { addLink,getLinks,delLink,getLinksByTitle,getAssociatedWord,getEssays,getEssayContent } from '@/api/link'
export default{
    data(){
        return{
            title:'',
            dialogVisible:false,
            contentDialog:false,
            searchWord:"",
            associatedWords:[],
            state:"",
            linkArray:[],
            essays:[],
            getEssayContent:""
        }
    },
    methods:{
        associated(queryString, cb){
            getAssociatedWord({
                "word":queryString
            }).then(res =>{
                let results = res.data;
                results = results.map((item)=>{
                    return {value:item}
                })
                cb(results)
            })
        },
        handleSelect(item){
            this.searchWord = item.value;
            getEssays({
                "word":this.searchWord
            }).then(res => {
                this.essays = res.data;
            })
        },
        handlePreview(link){
            
            getEssayContent({
                "link":link
            }).then(res =>{
                this.contentDialog = true
                this.$nextTick(()=>{
                    this.$refs.essayContent.innerHTML = res.data.content;
                    console.log(this.$refs.essayContent.innerHTML)
                })
                
            })
        },
        handleClose(){
            this.contentDialog = false
        },
        
        handleCommit(title,link){
            addLink({
                "title":title,
                "link":link
            }).then(res =>{
                if (res.code == 1){
                    this.$message.success("添加成功")
                    this.getUserLinks()
                }
                    
                else
                    this.$message.error("添加失败")
            })

            this.dialogVisible = false
        },
        delLinkById(id){
            delLink({'id':id}).then(res=>{
                if (res.code == 1){
                    this.$message.success("删除成功")
                    this.getUserLinks()
                }
                else{
                    this.$message.error("删除失败")
                }
                    
            })
        },
        getUserLinks(){
            getLinks().then(res =>{
            if (res.code == 1)
            {
                this.linkArray = res.data
            }
            else{
                this.$message.error("获取失败")
            }
        })
        },
        getByTitle(){
            getLinksByTitle({
                'title':this.title
            }).then(res =>{
                if (res.code==1){
                    this.linkArray = res.data
                }
                else
                    this.$message.error("查询失败")
            })
        }
    },
    mounted(){
        this.getUserLinks()
    }
}
</script>
<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep .el-dialog {
height: 78vh;
overflow: auto;
}


</style>